<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="myCanvas1" width="200" height="100"
style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<canvas id="myCanvas2" width="200" height="100"
style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<canvas id="myCanvas3" width="200" height="100"
style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script type="text/javascript">
var c1=document.getElementById("myCanvas1");
var context=c1.getContext("2d"); 
var x1 =   0;
var y1 =   0;
var x2 = 100;
var y2 =   0;
var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);
linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient1.addColorStop(0.5, 'rgb( 31, 58, 147)');
linearGradient1.addColorStop(1, 'rgb(  0, 0, 0)');
context.fillStyle=linearGradient1
context.fillRect(0,0,150,75);


var c2=document.getElementById("myCanvas2");
var ctx2=c2.getContext("2d");
ctx2.moveTo(0,0);
ctx2.lineTo(200,100);
ctx2.stroke();

var c3=document.getElementById("myCanvas3");
var ctx3=c3.getContext("2d");
ctx3.beginPath();
ctx3.arc(95,50,40,0,2*Math.PI);
ctx3.stroke();
</script>
</body>
</html>